<template>
  <main id="nomination" class="page">
    <pageBanner :bg_url="page.banner"/>
    <section class="section-container">
      <div class="section-wrap">
        <div class="about-date">
          <h3 class="date-title">NOMINATION DEADLINE</h3>
          <ul class="list-date">
            <li class="date-item">
              <p>2019</p>
              <span>YEAR</span>
            </li>
            <li class="date-item">
              <p>12</p>
              <span>MONTH</span>
            </li>
            <li class="date-item">
              <p>01</p>
              <span>DAY</span>
            </li>
          </ul>
        </div>
        <ul class="list-intro">
          <li v-for="(intro, index) of page.about" :key="index">
            <div class="intro-item" v-html="intro"></div>
          </li>
        </ul>
      </div>
    </section>
    <section class="section-container">
      <div class="section-wrap">
        <h2 class="sec-title">LIST OF NOMINATORS</h2>
        <p class="sec-intro">Find your nominator in the following list.</p>
        <div class="nominator-part" v-for="item of nominators" :key="item.type">
          <h2 class="nominator-state">{{item.type}}</h2>
          <ul class="nominator-item-list" v-if="item.list && item.list.length">
            <li v-for="(subItem,subIndex) of item.list" :key="subItem.title">
              <router-link :to="{name: 'Nomination', params: {id: subIndex}}">
                <img :src="subItem.thumb" :alt="subItem.title" class="fluid-img">
                <p class="nominator-item-name">{{subItem.title}}</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </main>
</template>
<script>
  import {mapGetters} from 'vuex'
  import PageBanner from "../components/PageBanner";

  export default {
    name: 'Nominator',
    components: {
      PageBanner
    },
    data() {
      return {
        page: {
          banner: {'background-image': `url(${require('@/assets/img/10.jpg')})`},
          about: [
            `<p>Generally, the nominators are the focal points of creative cities for UNESCO. The nominators are entrusted with the tasks of making call for and collecting entries, organizing first screening, and eventually nominating candidates.</p><p>All nominators have the liberty in deciding the methods, processes and schedules for their own nominations.</p><p>In the event that focal points do NOT possess adequate resources, expertise, experiences, etc. to perform nominations, they are allowed to commission or entrust the nominations to local professional design institutions or organisations, who they believe possess relevant and adequate capabilities and capacities.</p>`,
            `<p>However, such shift of nominating parties should NOT be deemed as establishment of relationships of any kind between SDPA and the commissioned or entrusted third parties. Focal points should exercise discretion when selecting nominators.</p><p>Each Creative City can have more than one nominator organization. Nominators can only nominate entrants who are natives of or have been living for at least 2 years in the nominators’ cities.</p><p>Nominators will be authorized (specific technical instruction will be given later) to register on behalf of nominees or instruct nominees to register online before 30 November 2019.</p><p>Shipping of designs and supporting materials must be arranged so as to arrive at the Secretariat before 30 November 2019.</p>`
          ]
        },
      }
    },
    computed: {
      ...mapGetters(['nominators'])
    }
  }
</script>
<style lang="scss">
  main#nomination {
    .section-container {
      padding: 160px 0;
      .section-wrap {
        margin: 0 40px;

        .about-date {
          text-align: center;
          .date-title {
            font: 500 16px/1 "Futura";
            letter-spacing: .2em;
          }
          .list-date {
            margin-top: 30px;
            li {
              display: inline-block;
              vertical-align: top;
              margin: 0 40px;
              text-align: center;
              p {
                color: $primary;
                font-size: 38px;
                font-weight: bolder;
              }
              span {
                display: block;
                margin-top: 1em;
                font-size: 14px;
                font-weight: 500;
                letter-spacing: .2em;
              }
            }
          }
        }
        .list-intro {
          margin-top: 100px;
          li {
            display: inline-block;
            vertical-align: top;
            width: 50%;
            .intro-item {
              margin: 0 20px;
              font: 500 18px/40px "Futura";
              letter-spacing: .01em;
            }
          }
        }

        .sec-title {
          font-size: 40px;
          letter-spacing: .05em;
          font-weight: bolder;
          text-align: center;
        }
        .sec-intro {
          max-width: 900px;
          margin-right: auto;
          margin-left: auto;
          font: 500 20px/40px "Futura";
          color: grey;
          letter-spacing: .01em;
          text-align: center;
          margin-top: 30px;
        }
      }
    }

    .nominator-part {
      margin-top: 60px;

      h2.nominator-state {
        font: 700 24px/40px "Futura";
        letter-spacing: .02em;
        padding-bottom: 15px;
        border-bottom: 1px solid #dbdbdb;
      }

      .nominator-item-list {
        margin-top: 30px;

        > li {
          width: 20%;
          display: inline-block;
          vertical-align: top;

          &:nth-of-type(n+6) {
            margin-top: 30px;
          }

          &:hover {
            .nominator-item-name {
              color: $primary;
            }
          }

          img {
            display: block;
            margin: 0 auto 12px;
            width: 80%;
            max-width: 130px;
          }

          p.nominator-item-name {
            text-align: center;
            font: 500 20px/40px "Futura";
            letter-spacing: .02em;
            color: #666;
            -webkit-transition: color .25s;
            transition: color .25s;
          }
        }
      }
    }
  }
</style>
